<template>
  <view class="app-container">
    <view class="order-header">
      <view class="flex-1">
        <u-text
          :lines="1"
          :text="`订单号: ${orderDetail.code}`"
          bold
          size="18"
        ></u-text>
      </view>
      <view>
        <u-text
          :text="getStatusText(orderDetail.status)"
          :class="getStatusClass(orderDetail.status)"
          size="18"
        ></u-text>
      </view>
    </view>

    <view class="card">
      <view class="card-title">收货信息</view>
      <view class="info-row">
        <text class="label">收货人:</text>
        <text class="value">{{ orderDetail.deliver.name }}</text>
      </view>
      <view class="info-row">
        <text class="label">电话:</text>
        <text class="value">{{ orderDetail.deliver.phone }}</text>
      </view>
      <view class="info-row">
        <text class="label">地址:</text>
        <text class="value">{{
          `${orderDetail.deliver.province}${orderDetail.deliver.city}${orderDetail.deliver.district}${orderDetail.deliver.address}`
        }}</text>
      </view>
    </view>

    <view class="card">
      <view class="card-title">商品信息</view>
      <view
        class="goods-item"
        v-for="(item, index) in orderDetail.lines"
        :key="index"
      >
        <u-image
          :src="item.product.image_urls[0]"
          width="120rpx"
          height="120rpx"
          mode="aspectFill"
        ></u-image>
        <view class="goods-info">
          <u-text :text="item.name" bold></u-text>
          <u-text :text="`规格: ${formatAttr(item)}`"></u-text>
          <u-text :text="`单价: ¥${item.unit_price}`"></u-text>
          <u-text :text="`数量: ${item.quantity}${item.uom.name}`"></u-text>
        </view>
        <view class="goods-price">
          <u-text :text="`¥${item.subtotal_price}`" bold></u-text>
        </view>
      </view>
    </view>

    <view class="card">
      <view class="card-title">金额明细</view>
      <view class="info-row">
        <text class="label">商品总额:</text>
        <text class="value">¥{{ orderDetail.total_price }}</text>
      </view>
      <view class="info-row">
        <text class="label">运费:</text>
        <text class="value">¥{{ orderDetail.express_amount }}</text>
      </view>
      <view class="info-row total-row">
        <text class="label">实付金额:</text>
        <text class="value">¥{{ orderDetail.payment_amount }}</text>
      </view>
    </view>

    <view class="card">
      <view class="card-title">备注</view>
      <u-text :text="orderDetail.remark || '暂无备注'" type="info"></u-text>
    </view>

    <view class="footer-btn" v-if="orderDetail.status === 'paid'">
      <u-button type="primary" @click="handleDelivery">发货</u-button>
    </view>
  </view>
</template>

<script setup>
import {
  supplierOrderDetail,
  supplierOrderDelivery,
} from "@/common/apis/supplier.js";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const orderDetail = ref({});

const getStatusText = (status) => {
  const statusMap = {
    canceled: "已取消",
    pending: "待支付",
    paid: "已支付",
    express: "已发货",
    completed: "已完成",
  };
  return statusMap[status] || status;
};

const handleDelivery = async () => {
  try {
    await supplierOrderDelivery(orderDetail.value.id);
    uni.showToast({ title: "发货成功", icon: "success" });
    // 刷新订单详情
    const res = await supplierOrderDetail(orderDetail.value.id);
    orderDetail.value = res;
  } catch (error) {
    console.error(error);
    uni.showToast({ title: "发货失败", icon: "error" });
  }
};

const getStatusClass = (status) => {
  return {
    "status-canceled": status === "canceled",
    "status-pending": status === "pending",
    "status-paid": status === "paid",
    "status-express": status === "express",
    "status-completed": status === "completed",
  };
};

function formatAttr(item) {
  if (item.product_attributes) {
    return item.product_attributes
      .map((attr) => `${attr.key}: ${attr.value}`)
      .join(", ");
  } else {
    return "";
  }
}

onLoad(async (options) => {
  if (options.id) {
    const res = await supplierOrderDetail(options.id);
    if (res) {
      orderDetail.value = res;
    }
  }
});
</script>

<style scoped lang="scss">
.app-container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
  margin-bottom: 20rpx;
}

.card {
  background-color: #fff;
  border-radius: 8rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;

  .card-title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    padding-bottom: 10rpx;
    border-bottom: 1rpx solid #f5f5f5;
  }
}

.info-row {
  display: flex;
  margin-bottom: 10rpx;
  font-size: 28rpx;

  .label {
    color: #999;
    margin-right: 20rpx;
    width: 150rpx;
  }

  .value {
    color: #333;
    flex: 1;
  }

  &.total-row {
    .label,
    .value {
      font-weight: bold;
      font-size: 32rpx;
    }
  }
}

.goods-item {
  display: flex;
  padding: 20rpx 0;
  border-bottom: 1rpx dashed #f5f5f5;

  .goods-info {
    flex: 1;
    padding: 0 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .goods-price {
    width: 120rpx;
    text-align: right;
  }
}

.status-canceled {
  color: #999;
}
.status-pending {
  color: #f0ad4e;
}
.status-paid {
  color: #5cb85c;
}
.status-shipped {
  color: #5bc0de;
}
.status-completed {
  color: #337ab7;
}
</style>
